<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>圆 半圆 扇形</title>
		<style>
			/* div{
				width: 100px;
				height: 100px;
				border: 10px solid red;
				/* border-radius: 20px; */
				/* border-radius:20px 40px; */
				/* border-radius:20px 10px 50px; */
				/* border-radius:20px 10px 50px 30px; */
			/* } */ 
			
			div{
				width: 100px;
				height: 100px;
				border: 3px solid red;
				border-radius: 50%;
				border-color: #000000 #0000FF #008000 #B6DBF5;
			}
			/* 圆 */
			/* div:nth-of-type(1){
				width: 100px;
				height: 50px;
				border-radius: 50px 50px 0 0;
				} */
				/* 半圆 */
				div:nth-of-type(1){
					width: 150px;
					height: 150px;
					border-radius: 150px 0 0 0;
				}
				/* 扇形 */
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>
